@use "./config-dark.scss" as dark;
:root {
  --x-max-width: 1680px;
  --x-radius: 1rem;
  --x-fg: hsl(0, 0%, 20%);
  --x-bg: hsl(0, 0%, 97%);
  --x-html-bg: var(--x-fg);
  --x-body-fg: var(--x-fg);
  --x-body-bg: var(--x-bg);
  --x-gutter: 1rem;
  --x-app-border-color: var(--x-fg);
  --x-app-bg: var(--x-bg);
  --x-footer-fg: var(--x-bg);
  --x-footer-bg: var(--x-fg);
  --x-benchmark-ruby-bg: hsla(0, 0%, 0%, 0.05);
  --x-card-bg: hsla(0, 0%, 20%, 0.03);
  --x-card-bg-hover: linear-gradient(to right, transparent, hsla(0, 0%, 0%, 0.102), transparent);
  --x-card-legend-fg: var(--x-bg);
  --x-card-legend-bg: linear-gradient(hsl(0, 0%, 15%), var(--x-fg));
  --x-card-legend-arrow-fg: var(--x-card-legend-fg);
  --x-card-title-fg: var(--x-fg);
  --x-card-title-bg: var(--x-bg);
  --x-card-des-fg: var(--x-bg);
  --x-card-des-bg: var(--x-fg);
  --x-card-border-color: hsla(0, 0%, 0%, 0.1);
  --x-card-split-color: hsla(0, 0%, 0%, 0.3);
  --x-card-box-shadow: hsla(0, 0%, 20%, 0.3) 0px -1px 0px, hsl(0, 0%, 100%) 0px 1px 0px inset,
    hsla(0, 0%, 20%, 0.3) 0px -1px 0px inset, hsl(0, 0%, 100%) 0px 1px 0px;
  --x-title-fg: var(--x-bg);
  --x-title-bg: var(--x-fg);
  --x-title-box-shadow: 0 1px 0 hsl(0, 0%, 0%);
  // star me
  --x-star-me-fg: var(--x-bg);
  --x-star-me-bg: var(--x-fg);
  --x-star-me-hover-fg: hsl(0, 0%, 100%);
  --x-star-me-hover-bg: var(--x-fg);
  --x-star-me-border-color: linear-gradient(90deg, transparent, hsl(0, 0%, 100%), transparent);
  // nav
  --x-nav-fg: var(--x-bg);
  --x-nav-fg-hover: var(--x-fg);
  --x-nav-fg-active: var(--x-fg);
  --x-nav-bg: var(--x-fg);
  --x-nav-bg-hover: linear-gradient(hsla(0, 0%, 100%, 0.85), hsla(0, 0%, 100%, 0.65));
  --x-nav-bg-active: linear-gradient(hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.75));
  --x-nav-border-color: hsla(0, 0%, 100%, 0.1);
  // alert
  --x-status-ok-fg: hsl(0, 0%, 100%);
  --x-status-ok-bg: linear-gradient(hsl(120, 100%, 30%), hsl(120, 100%, 45%));
  --x-status-error-fg: hsl(0, 0%, 100%);
  --x-status-error-bg: linear-gradient(hsl(0, 0%, 50%), hsl(0, 0%, 73%));
  // search link
  --x-search-fg: var(--x-fg);
  --x-search-bg: hsla(0, 0%, 0%, 0.05);
  --x-search-bg-hover: hsla(0, 0%, 0%, 0.15);
  // progress
  --x-progress-fg: var(--x-bg);
  --x-progress-bg: linear-gradient(hsl(0, 0%, 0%), hsl(0, 0%, 20%));
  --x-progress-value-bg: hsl(120, 100%, 40%);
  --x-progress-value-highlight-bg: linear-gradient(hsla(0, 0%, 100%, 0.45), transparent);
  --x-progress-value-highlight-border-color: linear-gradient(
    to right,
    hsla(0, 0%, 100%, 0.1),
    hsla(0, 0%, 100%, 0.45),
    hsla(0, 0%, 100%, 0.1)
  );
  --x-progress-value-box-shadow: 0px 0px 1px 1px hsl(0, 0%, 0%);
  // network stats
  --x-network-stats-tx-fg: hsl(23, 100%, 38%);
  --x-network-stats-rx-fg: hsl(120, 100%, 23%);
  // network node
  --x-network-node-fg: var(--x-fg);
  --x-network-node-bg: hsla(132, 4%, 23%, 0.1);
  --x-network-node-border-color: var(--x-card-split-color);
  --x-network-node-row-bg: linear-gradient(to right, transparent, hsla(0, 0%, 100%, 0.5), transparent);
  // ping
  --x-ping-btn-fg: var(--x-bg);
  --x-ping-btn-bg: var(--x-fg);
  --x-ping-result-fg: var(--x-bg);
  --x-ping-result-bg: var(--x-fg);
  --x-ping-result-scrollbar-bg: var(--x-fg);
  // sys load
  --x-sys-load-fg: var(--x-bg);
  --x-sys-load-bg: var(--x-fg);
  // toast
  --x-toast-fg: var(--x-bg);
  --x-toast-bg: var(--x-fg);
}
@include dark.config();
